import { defineComponent, reactive } from "vue";
import { ElCheckbox } from "element-plus";
import "./tableCard.scss";
const tableCard = defineComponent({
	props: {
		data: {
			type: Array,
			default: () => {
				return [];
			}
		},
		// table表头字段
		column: {
			type: Array,
			default: () => {
				return [];
			}
		},
		// 每行卡片数
		col: {
			type: Number,
			default: 4
		},
		setting: {
			type: Object,
			default: () => {
				return {
					titleIcon: "", // 图标
					titleKey: "deviceName", // 标题字段
					subtitleKey: "SN", // 副标题字段key
					subtitleName: "SN：", // 副标题字段label
					selection: true // 是否复选框
				};
			}
		},
		// 选中事件
		selectionChange: {
			type: Function
		}
	},
	setup(props, { slots }) {
		let selectList = reactive([] as any[]);
		const change = (el: Boolean | String | Number, row: any) => {
			if (el) {
				selectList.push(row);
			} else {
				selectList = selectList.filter(e => JSON.stringify(e) !== JSON.stringify(row));
			}
			props.selectionChange?.(selectList);
		};
		return () => {
			return (
				<div class={`table-mode-card grid grid-cols-${props.col} gap-6`}>
					{props.data.map((el: any) => {
						return (
							<div class="table-mode-card-item shadow-md">
								<div class="mode-card-item-title">
									{slots.title ? (
										slots.title(el)
									) : (
										<>
											{props.setting.titleIcon ? <img src={props.setting.titleIcon} /> : null}
											<div class="mode-card-item-c">
												<div class="mode-card-item-c-t">{el[props.setting.titleKey]}</div>
												<div class="mode-card-item-c-s truncate">
													{props.setting.subtitleName + el[props.setting.subtitleKey]}
												</div>
											</div>
											{props.setting.selection ? (
												<ElCheckbox
													size={"large"}
													onChange={(et: Boolean | String | Number) => {
														change(et, el);
													}}
												/>
											) : null}
										</>
									)}
								</div>
								<div class="mode-card-item-content truncate">{slots.content?.(el)}</div>
								<div class="mode-card-item-footer bg-gray-100">{slots.footer?.(el)}</div>
							</div>
						);
					})}
				</div>
			);
		};
	}
});
export default tableCard;
